<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../css/swiper.min.css">
    <link rel="stylesheet" href="../../css/style.css">
    <title></title>
    <style type="text/css">
        .j03_item_box {
            /*width: 205px;*/
            width: 215px;
            height: 173px;
            float: left;
            margin-right: 5px;
        }

        .j03_item_box:last-of-type {
            margin-right: 0;
        }

        .j03_item_box .j03_item_img {
            width: 100%;
            height: 122px;
            object-fit: cover;
        }

        .j03_item_box .j03_item_text {
            color: #fff;
            font-size: 16px;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-top: 10px;
        }
    </style>
</head>
<body style="overflow: hidden;">
<div class="swiper-container" id="swiperBox">
    <div id="j03BottomBox" class="swiper-wrapper">

    </div>
</div>
</body>
<script src="../../js/jquery-3.1.1.min.js"></script>
<script src="../../js/swiper.min.js"></script>
<script src="../../js/common.js"></script>
<script>
	$(function () {
		getJson('yjp_SZHTD.json', {}, function (res) {
			if (res.code === 200) {
				for (let i = 0; i < res.data.length; i += 4) {
                    
					let arr = res.data.slice(i, i + 4);
					let str = `<div class="swiper-slide">`;
					for (let j = 0; j < arr.length; j++) {
						str += `<div class="j03_item_box">
                            <img class="j03_item_img"
                                 src="../../img/all/alll${i+j+1}.jpg"
                                 alt="">
                            <p class="j03_item_text" title="${arr[j].synopsis}">${arr[j].synopsis}</p>
                        </div>`
					}
					str += `</div>`;
					$('#j03BottomBox').append(str);
				}
				if (res.data.length > 4) {
					new Swiper('#swiperBox', {
						autoplay: {
							disableOnInteraction: false
						},//可选选项，自动滑动
					})
				}
			}
		})

	})
</script>
</html>
